﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>社区</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="js/dynamicitem.js"></script>
    <script src="js/reachbottom.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="js/flyzoom.js"></script>
    <style>
        .top {
            border-bottom: 1px solid #e8e8e8;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 200;
            background: #F6F6F9
        }

        .icon {
            font-size: 24px;
            line-height: 40px;
            margin: 5px 0;
            color: #07C160;
            -webkit-transition: font-size 0.5s ease-out 0s;
            -moz-transition: font-size 0.5s ease-out 0s;
            transition: font-size 0.5s ease-out 0s;
        }

        .weui-tab__content {
            border-radius: 10px;
            margin: 5px;
            background-color: white;
        }

        .scrolldiv {
            overflow-x: scroll;
            white-space: nowrap;
        }

        /*去除滚动条*/
        ::-webkit-scrollbar {
            display: none;
        }

        .topiclist {
            display: flex;
        }

        .item {
            height: 80px;
            width: 180px;
            margin-right: 20px;
            position: relative;
        }

        .itemimg {
            height: 80px;
            width: 180px;
            object-fit: cover;
        }

        .itemdiv {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 100;
        }

        .row1 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 160px;
        }

        .label {
            line-height: 2em;
            height: 2em;
            padding: 0 5px;
            border-radius: 5px;
        }
    </style>
</head>

<body ontouchstart>
    <div class="weui-tab" id="t1" style="height:auto;">
        <div class="weui-navbar top">
            <div class="weui-navbar__item">
                关注
            </div>
            <div class="weui-navbar__item">
                精选
            </div>
        </div>
        <div class="weui-tab__panel">
            <div id="s0" class="weui-tab__content">
                <div class="weui-panel weui-panel_access">
                    <div class="weui-panel__bd" id="followtopiclist">

                    </div>
                </div>
                <div id="followdynamiclist"></div>
                <div class="weui-loadmore" id="more0">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s1" class="weui-tab__content">
                <div class="scrolldiv page-bd-15">
                    <div class="topiclist" id="topiclist">
                        <div class="item2" id="alltopic">
                            <div style="width: 80px;line-height: 80px;text-align: center;"> 全部话题</div>
                        </div>
                    </div>
                </div>
                <div id="dynamiclist"></div>
                <div class="weui-loadmore" id="more1">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
        </div>
        <div style="height: 55px;"></div>
    </div>
    <div id='tb' class="weui-tab" style="height:auto;">
        <div class="weui-tabbar tab-bottom">
            <a href="index.html" class="weui-tabbar__item">
                <i class="icon icon-27 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label f-green">社区</p>
            </a>
            <a href="search.html" class="weui-tabbar__item ">
                <i class="icon icon-4 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">搜索</p>
            </a>
            <a href="mine.html" class="weui-tabbar__item ">
                <i class="icon icon-30 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">我的</p>
            </a>
        </div>
    </div>
    <div style="width:60px;height:60px;position:fixed;z-index:100;bottom:100px;right:10px;" >
        <img src="images/publish.png" style="width:60px;height:60px;" id="publish"/>
        <div id="dynamicdiv" style="display: none;position: absolute;top: 0px;right: 60px;">
            <div style="display:flex;">
                <div data-type="1" class="publishitem"> <img src="images/image.png" style="width:60px;height:60px;" /></div>
                <div data-type="2" class="publishitem"> <img src="images/video.png" style="width:60px;height:60px;" /></div>
            </div>
        </div>
    </div>
</body>
<script type="text/html" id="followtopictemp">
    {{each list item}}
    <a href="dynamic/topicdetail.html?topicId={{item.TopicId}}" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
            <img class="weui-media-box__thumb" src="images/topic.png" alt="">
        </div>
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">#{{item.TopicName}}</h4>
            <p class="weui-media-box__desc">{{item.LookersCount}}人围观</p>
        </div>
    </a>
    {{/each}}
</script>
<script type="text/html" id="topictemp">
    {{each list item}}
    <div class="item" data-topicid="{{item.TopicId}}">
        <image class="itemimg" src="{{item.BackImg||'images/back.png'}}"></image>
        <div class="itemdiv">
            <div class="weui-media-box__title row1">#{{item.TopicName}}</div>
            <div class="weui-media-box__desc">{{item.LookersCount}}人围观</div>
        </div>
    </div>
    {{/each}}
</script>

</html>
<script>

    lobsterh5.main({
        data: {
            tabindex: 1,
            pagelist: [{
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }],
            dynamiclist: [],//精选
            followdynamiclist: [],//关注
        },
        //初始化页面
        pageload: function () {
            jQuery.noConflict();
            var self = this;
            self.data.tabindex = lobsterh5.GetUrlParam("tabindex") || 1;
            self.initevent();
            self.getTopicList();
            self.getConcernTopicList();
        },

        //初始化事件
        initevent: function () {
            var self = this;
            $('#t1').tab({
                defaultIndex: self.data.tabindex,
                activeClass: 'tab-green',
                onToggle: function (index) {
                    self.data.tabindex = index;
                    if (!self.data.pagelist[index].isloading && index == 0)
                        self.getFollowDynamicList();
                    else if (!self.data.pagelist[index].isloading && index == 1)
                        self.getDynamicList();
                }
            })
            $(window).lobsterreachbottom({
                onSuccess: function () {
                    if (self.data.tabindex == 0)
                        self.getFollowDynamicList();
                    else
                        self.getDynamicList();
                }
            })
            $("#alltopic").click(function () {
                location.href = "dynamic/topiclist.html";
            })
            $("#topiclist").on("click", ".item", function () {
                location.href = "dynamic/topicdetail.html?topicId=" + $(this).data("topicid");
            })
            $("#publish").click(function () {
                if ($("#dynamicdiv").is(":visible"))
                    $("#dynamicdiv").fadeOut();
                else
                    $("#dynamicdiv").fadeIn();
            });
            $(".publishitem").click(function(){
                location.href="dynamic/publish.html?type="+$(this).data("type");
            })
        },
        getDynamicList() {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetDynamicList", {
                page: self.data.pagelist[tabindex].page,
                limit: self.data.pagelist[tabindex].limit,
                userId: localStorage.getItem("userId"),
            }).then(res => {
                self.getdynamicsuccess(res, tabindex);
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        getFollowDynamicList() {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetFollowDynamicList", {
                page: self.data.pagelist[tabindex].page,
                limit: self.data.pagelist[tabindex].limit,
                userId: localStorage.getItem("userId"),
            }).then(res => {
                self.getdynamicsuccess(res, tabindex);
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        getdynamicsuccess(res, tabindex) {
            var self = this;
            var html = "";
            if (tabindex == 1)
                $("#dynamiclist").lobsterdynamicitem({
                    list: res, userId: self.data.userId, btns: {
                        deletebtn: true,
                        reportbtn: true,
                        followbtn: true
                    }
                })
            else
                $("#followdynamiclist").lobsterdynamicitem({
                    list: res, userId: self.data.userId, btns: {
                        deletebtn: true,
                        reportbtn: true,
                        followbtn: false
                    }
                })
            if (res.length < self.data.pagelist[tabindex].limit) {
                self.data.pagelist[tabindex].hasmore = false;
                $("#more" + tabindex).text("没有更多了");
            } else {
                $("#more" + tabindex).hide();
                self.data.pagelist[tabindex].page++;
            }
            self.data.pagelist[tabindex].isloading = true;
        },

        getTopicList() {
            var self = this;
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetTopicList", {
                searchkey: '',
                topictype: 0,
                page: 1,
                limit: 5,
            }).then(res => {
                res.forEach(a => {
                    a.LooksCount = self.convertcount(parseInt(a.LikesCount));
                })
                var html = template("topictemp", { list: res });
                $("#alltopic").before(html);
                // self.inittemp($("#topiclist"), "topictemp", { list: res });
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        getConcernTopicList() {
            var self = this;
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetConcernTopicList", {
                page: 1,
                limit: 3,
                userId: self.data.userId
            }).then(res => {
                res.forEach(a => {
                    a.LooksCount = self.convertcount(parseInt(a.LikesCount));
                })
                self.inittemp($("#followtopiclist"), "followtopictemp", { list: res });
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        inittemp(_id, tempid, data) {
            var html = template(tempid, data);
            _id.html(html);
        },
        convertcount(count) {
            var count = count || 0;
            if (count >= 10000) {
                count = (count / 10000).toFixed(1) + 'w';
            }
            return count;
        }
    }); 
</script>